<template>
    <div>
        展示城市
        <table border="1">
            <tr>
                <td>城市名称</td>
            </tr>
            <tr v-for="i in clist">
                <td>
                    <van-button @click="changecid(i.id)" :class="i.id==city_id?'active':''">{{i.name}}</van-button>
                </td>
            </tr>
        </table>
        <br><br>
        展示产品
        <table>
            <tr>
                <td>名称</td>
                <td>
                    <van-button @click="priceorder">价格</van-button>
                </td>
            </tr>
            <tr v-for="i in plist">
                <td>{{i.name}}</td>
                <td>{{i.price}}</td>
            </tr>
        </table>
        <!-- 分页展示         总共多少条        每页显示多少条      绑定当前页    -->
        <van-pagination v-model="page" :total-items="total" :items-per-page="2" @change="change"/>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                clist:[],
                plist:[],
                city_id:0,
                page:1,
                total:0,
                sort:'asc',

            }
        },
        methods:{
            priceorder(){
                if(this.sort=='asc'){
                    this.sort='desc'
                }else{
                    this.sort='asc'
                }
                this.get_plist()
            },
            get_clist(){
                this.$axios.get('pic/cityM')
                .then(res=>{
                    this.clist=res.data.list
                })
            },
            changecid(id){
                this.city_id=id
                this.get_plist()
            },
            get_plist(){
                this.$axios.get('pic/produatA?city_id='+this.city_id+'&page='+this.page+'&sort='+this.sort)
                .then(res=>{
                    this.plist=res.data.list
                    this.total=res.data.total
                })
            },
            //分页 change
            change(v){
                this.page=v
                this.get_plist()
            },

        },
        mounted(){
            this.get_clist(),
            this.get_plist()
        },
    }
</script>

<style scoped>
.active{
    background-color: blueviolet;
}
</style>